<style scoped>
.site {
  margin: 0 8px;
}
.g-dropdown {
  cursor: pointer;
}
</style>
<!--  -->
<template>
  <div class="site">
    <el-dropdown trigger="click" class="g-dropdown" @command="changeSite">
      <span class="el-dropdown-link" style="color: #67c23a">
        {{ currentSite && currentSite.language && currentSite.language.name
        }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in currentSite.list" :key="item.id" :command="item.id">
          <template v-for="language in alllanguage">
            <template v-if="language.id == item.languageId">{{
              language.name
            }}</template>
          </template>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import Session from '@/core/session'
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters([
      'currentSite',
      'alllanguage'
    ])
  },
  methods: {
    changeSite (command) {
      if (parseInt(this.currentSite.site.id) === parseInt(command)) {
        return
      }
      this.$load('/site/change', { siteId: command }).then((response) => {
        if (response && parseInt(response) === 1) {
          let url = '/backend/user?' + Session.routerQueryString(response.jsessionid)
          window.location.href = url
        }
      })
    }
  }
}

</script>
